<script setup lang="ts">
import LazyLoadComponent from './components/LazyLoadComponent.vue'

const loadData = () => {
  console.log('Data loaded')
}
</script>

<template>
  <header class="grid grid-cols-3 w-full justify-center items-center p-4 shadow-md mb-8">
    <div class="justify-self-start flex items-center space-x-2 text-indigo-900">
      <h1>WayTale</h1>
    </div>
    <div class="w-full flex space-x-4 justify-center"></div>
  </header>

  <main class="px-8 pb-8">

    <div class="w-full overflow-x-auto mb-8">
      <table
        class="w-full text-left border border-collapse rounded sm:border-separate border-slate-200"
        cellspacing="0"
      >
        <tbody>
          <tr>
            <th
              scope="col"
              class="h-12 px-6 text-sm font-medium border-l first:border-l-0 stroke-slate-700 text-slate-700 bg-slate-100"
            >
              Name
            </th>
            <th
              scope="col"
              class="h-12 px-6 text-sm font-medium border-l first:border-l-0 stroke-slate-700 text-slate-700 bg-slate-100"
            >
              Title
            </th>
            <th
              scope="col"
              class="h-12 px-6 text-sm font-medium border-l first:border-l-0 stroke-slate-700 text-slate-700 bg-slate-100"
            >
              Company
            </th>
            <th
              scope="col"
              class="h-12 px-6 text-sm font-medium border-l first:border-l-0 stroke-slate-700 text-slate-700 bg-slate-100"
            >
              Role
            </th>
            <th
              scope="col"
              class="h-12 px-6 text-sm font-medium border-l first:border-l-0 stroke-slate-700 text-slate-700 bg-slate-100"
            >
              Username
            </th>
          </tr>
          <tr>
            <td
              class="h-12 px-6 text-sm transition duration-300 border-t border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500"
            >
              Ayub Salas
            </td>
            <td
              class="h-12 px-6 text-sm transition duration-300 border-t border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500"
            >
              Designer
            </td>
            <td
              class="h-12 px-6 text-sm transition duration-300 border-t border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500"
            >
              Carroll Group
            </td>
            <td
              class="h-12 px-6 text-sm transition duration-300 border-t border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500"
            >
              Member
            </td>
            <td
              class="h-12 px-6 text-sm transition duration-300 border-t border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500"
            >
              salas_a
            </td>
          </tr>
          <tr>
            <td
              class="h-12 px-6 text-sm transition duration-300 border-t border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500"
            >
              Agnes Sherman
            </td>
            <td
              class="h-12 px-6 text-sm transition duration-300 border-t border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500"
            >
              Developer
            </td>
            <td
              class="h-12 px-6 text-sm transition duration-300 border-t border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500"
            >
              Apple
            </td>
            <td
              class="h-12 px-6 text-sm transition duration-300 border-t border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500"
            >
              Admin
            </td>
            <td
              class="h-12 px-6 text-sm transition duration-300 border-t border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500"
            >
              shermanagnes
            </td>
          </tr>
          <tr>
            <td
              class="h-12 px-6 text-sm transition duration-300 border-t border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500"
            >
              Jemma Cummings
            </td>
            <td
              class="h-12 px-6 text-sm transition duration-300 border-t border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500"
            >
              Senior Designer
            </td>
            <td
              class="h-12 px-6 text-sm transition duration-300 border-t border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500"
            >
              20goto10
            </td>
            <td
              class="h-12 px-6 text-sm transition duration-300 border-t border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500"
            >
              Member
            </td>
            <td
              class="h-12 px-6 text-sm transition duration-300 border-t border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500"
            >
              jemmaC
            </td>
          </tr>
          <tr>
            <td
              class="h-12 px-6 text-sm transition duration-300 border-t border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500"
            >
              Jimi Cardenas
            </td>
            <td
              class="h-12 px-6 text-sm transition duration-300 border-t border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500"
            >
              Copywriter
            </td>
            <td
              class="h-12 px-6 text-sm transition duration-300 border-t border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500"
            >
              Wind-UI
            </td>
            <td
              class="h-12 px-6 text-sm transition duration-300 border-t border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500"
            >
              Owner
            </td>
            <td
              class="h-12 px-6 text-sm transition duration-300 border-t border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500"
            >
              cardenasji
            </td>
          </tr>
          <tr>
            <td
              class="h-12 px-6 text-sm transition duration-300 border-t border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500"
            >
              Mateusz Tucker
            </td>
            <td
              class="h-12 px-6 text-sm transition duration-300 border-t border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500"
            >
              Project Manager
            </td>
            <td
              class="h-12 px-6 text-sm transition duration-300 border-t border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500"
            >
              Tailwindui
            </td>
            <td
              class="h-12 px-6 text-sm transition duration-300 border-t border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500"
            >
              Member
            </td>
            <td
              class="h-12 px-6 text-sm transition duration-300 border-t border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500"
            >
              mt
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <div class="w-full overflow-x-auto mb-8">
      <table
        class="w-full text-left border border-collapse rounded sm:border-separate border-slate-200"
        cellspacing="0"
      >
        <tbody>
          <tr>
            <th
              scope="col"
              class="h-12 px-6 text-sm font-medium border-l first:border-l-0 stroke-slate-700 text-slate-700 bg-slate-100"
            >
              Name
            </th>
            <th
              scope="col"
              class="h-12 px-6 text-sm font-medium border-l first:border-l-0 stroke-slate-700 text-slate-700 bg-slate-100"
            >
              Title
            </th>
            <th
              scope="col"
              class="h-12 px-6 text-sm font-medium border-l first:border-l-0 stroke-slate-700 text-slate-700 bg-slate-100"
            >
              Company
            </th>
            <th
              scope="col"
              class="h-12 px-6 text-sm font-medium border-l first:border-l-0 stroke-slate-700 text-slate-700 bg-slate-100"
            >
              Role
            </th>
            <th
              scope="col"
              class="h-12 px-6 text-sm font-medium border-l first:border-l-0 stroke-slate-700 text-slate-700 bg-slate-100"
            >
              Username
            </th>
          </tr>
          <tr>
            <td
              class="h-12 px-6 text-sm transition duration-300 border-t border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500"
            >
              Ayub Salas
            </td>
            <td
              class="h-12 px-6 text-sm transition duration-300 border-t border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500"
            >
              Designer
            </td>
            <td
              class="h-12 px-6 text-sm transition duration-300 border-t border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500"
            >
              Carroll Group
            </td>
            <td
              class="h-12 px-6 text-sm transition duration-300 border-t border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500"
            >
              Member
            </td>
            <td
              class="h-12 px-6 text-sm transition duration-300 border-t border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500"
            >
              salas_a
            </td>
          </tr>
          <tr>
            <td
              class="h-12 px-6 text-sm transition duration-300 border-t border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500"
            >
              Agnes Sherman
            </td>
            <td
              class="h-12 px-6 text-sm transition duration-300 border-t border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500"
            >
              Developer
            </td>
            <td
              class="h-12 px-6 text-sm transition duration-300 border-t border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500"
            >
              Apple
            </td>
            <td
              class="h-12 px-6 text-sm transition duration-300 border-t border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500"
            >
              Admin
            </td>
            <td
              class="h-12 px-6 text-sm transition duration-300 border-t border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500"
            >
              shermanagnes
            </td>
          </tr>
          <tr>
            <td
              class="h-12 px-6 text-sm transition duration-300 border-t border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500"
            >
              Jemma Cummings
            </td>
            <td
              class="h-12 px-6 text-sm transition duration-300 border-t border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500"
            >
              Senior Designer
            </td>
            <td
              class="h-12 px-6 text-sm transition duration-300 border-t border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500"
            >
              20goto10
            </td>
            <td
              class="h-12 px-6 text-sm transition duration-300 border-t border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500"
            >
              Member
            </td>
            <td
              class="h-12 px-6 text-sm transition duration-300 border-t border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500"
            >
              jemmaC
            </td>
          </tr>
          <tr>
            <td
              class="h-12 px-6 text-sm transition duration-300 border-t border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500"
            >
              Jimi Cardenas
            </td>
            <td
              class="h-12 px-6 text-sm transition duration-300 border-t border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500"
            >
              Copywriter
            </td>
            <td
              class="h-12 px-6 text-sm transition duration-300 border-t border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500"
            >
              Wind-UI
            </td>
            <td
              class="h-12 px-6 text-sm transition duration-300 border-t border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500"
            >
              Owner
            </td>
            <td
              class="h-12 px-6 text-sm transition duration-300 border-t border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500"
            >
              cardenasji
            </td>
          </tr>
          <tr>
            <td
              class="h-12 px-6 text-sm transition duration-300 border-t border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500"
            >
              Mateusz Tucker
            </td>
            <td
              class="h-12 px-6 text-sm transition duration-300 border-t border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500"
            >
              Project Manager
            </td>
            <td
              class="h-12 px-6 text-sm transition duration-300 border-t border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500"
            >
              Tailwindui
            </td>
            <td
              class="h-12 px-6 text-sm transition duration-300 border-t border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500"
            >
              Member
            </td>
            <td
              class="h-12 px-6 text-sm transition duration-300 border-t border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500"
            >
              mt
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <LazyLoadComponent @intersect="loadData">
      <div class="grid grid-cols-3 gap-4">
        <div class="col-span-3">
          <h2 class="text-2xl font-bold mb-4">Welcome to WayTale</h2>
          <p class="text-lg">
            WayTale is a platform for sharing your travel experiences with the world. You can create
            a new tale, read other people's tales, and leave comments on them. You can also follow
            other users and get notified when they post a new tale.
          </p>
        </div>
      </div>
    </LazyLoadComponent>
  </main>
</template>
